Webtérkép készítése 2.

Webtérkép készítése 2.

Az előző részben szépen átnéztük az alapokat, ezúttal bevesszük a játékba a MongoDB-t, ahol eltároljuk a térképen megjeleítendő adatokat GeoJSON formátumban, azokat aztán lekérdezzük egy Spring alkalmazással, annak az API-ján keresztül az egész átkerül a weboldalunkra.

A MongoDB-ről már beszéltünk korábban, az alapján egészen egyszerűen hozzunk létre egy új adatbázist pl. hungarianpoi néven, illetve egy collection-t pl. poi néven. Ezekbe aztán elhelyezünk GeoJSON formátumban néhány dokumentumot, amelyet meg fogunk jeleníteni a térképen. A GeoJSON nem egy nagy dolog:

{"name": "Budapest",

"population": "1700000",

"location": {

"coordinates": [18.42132568359375, 47.200910301521674],

"type": "Point"}}

Ahogy láthatjuk, annyival tud többet, mint egy szimpla JSON, hogy van benne koordináta is (WGS koordináta rendszerben), amelyet mindjárt fogunk, és az alapján leteszünk pár ikont a térképünkre. Sőt, még rá is tudunk majd klikkelni, hogy a mögöttes adattartalom (name és population) is megjelenjen nekünk.

Mielőtt még az Angular oldali megvalósításnak nekiállnánk, egy korábbi cikk alapján a Spring Boot oldali API-t is belőjük, amely nem csinál mást, minthogy hozzákapcsolóik a MongoDB adatbázisunkhoz, onnan leszedi a szükséges adatokat, majd API-n elérhetővé teszi. Fontos viszont, hogy a Controller-ben engedélyezzük, hogy az Angular oldali alkalmazásunk lekérdezhesse az API-n továbbított adatokat. Ehhez csak annyi kell, hogy a @RestController annotációnk alatt legyen ott a következő: @CrossOrigin(origins = "http://localhost:4200"), természetesen az url attól függ, hogy hol is fut az Angular alkalmazásunk.

És még egy dolog, sajnos a Leaflet-ben van egy kis bug, ugyanis a megjelenítendő ikonok automatikusan nem kerülnek be abba a mappába, ahol az Angular fogja keresni. Ezért a következőt kell még tennünk. Egyfelől az angular.json-ba másoljuk be az alábbiakat:

"assets": [

"src/favicon.ico",

"src/assets",

{

"glob": "**/*",

"input": "node_modules/leaflet/dist/images/",

"output": "./assets"

}

],

És még a map.component.ts-t is meg kell hekkelnünk egy kicsit, lásd a @Component annotáció fölötti részt, ahol felsoroljuk a használt ikonokat, illetve azok kinézetét is beállítjuk.

Jó, innen már jöhet a lényeg. Létrehozunk két service-t. Ezek lesznek a felelősek azért, hogy a térképen az adatbázis koorindátáai alapján az ikonok megjelenjenek, illetve az ahhoz kapcsolódó adatok is. A pop-up service egy rémesen egyszerű történet, nem csinálunk mást, csak átadjuk a name és population mezők adatait a marker service számára, amelyet ott constructor-ban hívunk meg. A marker service-ben pedig szépen megszólítjuk a Spring által szolgáltatott API url-jét, http.get függvénnyel pedig végigmegyünk az összes JSON dokumentumon, amit az a MongoDB-ből vesz át. A koordinátáit szépen lekérdezzük, és hozzáadjuk (a kapcsolódó adatokkal együtt) a map objektumunknak.

A folyamat következő lépésében pedig a map.component.ts meghívja a marker service-t a ngAfterViewInit() függvényből, és ha ezekután megnézzük a térképünket, akkor lőn csoda, meg is jelentek az adataink a felületen.

Tényleg nem egy nagy dolog az egész, a fentiek alapján viszonylag egyszerűen össze lehet dobni egy ilyen rendszert. Mivel MongoDB-t használunk, az adatbázis oldali sebesség sem lesz ellenünk, ha pedig mondjuk egyéb szolgáltatásokat is bele akarunk építeni a játékba, pl. csak bizonyos lakosságszám szerinti települések jelenjenek meg a térképen, akkor érdemes lehet a Spring oldalán egy külön szolgáltatást kialaítani erre. Ha meg mondjuk a lakossászámtól függően akarjuk színezni a pöttyöket a térképen, akkor az Angular-Leaflet oldalon tudunk előre elkészített függvényekkel bolondozni.